<template>
  <div id="app">
    <Login v-if="!token"></Login>
    <div v-if="token" class="screen-container">
      <div class="map-container">
        <div class="map-mask-left" v-if="this.$route.path=='/SpeciesStatisticsAuto'"></div>
        <div class="map-mask left-mask" v-if="!fullScreen"></div>
        <AMapContainer class="map" v-if="this.$route.path!='/ScienceEducation'"/>
        <SvgMap class="map" v-if="this.$route.path=='/ScienceEducation'" ref="amapSvgRef"/>
        <div class="map-mask right-mask" v-if="!fullScreen"></div>
        <div class="map-mask-right" v-if="this.$route.path=='/SpeciesStatisticsAuto'"></div>
      </div>
      <div class="content-layer" @click.stop>
        <Header />
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
  import AMapContainer from '@/components/AMapContainer.vue'
  import SvgMap from '@/components/SvgMap.vue'
  import Header from '@/components/Header.vue'
  import Login from './views/Login'
  import {EventBus} from "./utils/event-bus";
  export default {
    name: 'App',
    components: {
      AMapContainer,
      Header,
      Login,
      SvgMap
    },
    provide() {
      return {
        imgUrl:'http://111.229.223.177:8090/renren-admin/api/bg/getImageXY?mw=500&mh=500&name=',
        fileUrl:'http://111.229.223.177:8090/renren-admin/api/bg/download/',
        updateSpeciesSelect:this.updateSpeciesSelect,
        getSvgMapDom: this.getSvgMapDom,
        getSvgMapComponent: this.getSvgMapComponent
      };
    },
    data() {
      return {
        fullScreen:true,
        mapShow:true,
        token:localStorage.getItem('token')
      }
    },
    created() {
      EventBus.$on('sent-device-id-to-right', (message) => {
        this.mapShow=true;
      });
      EventBus.$on('map-show', (message) => {
        this.mapShow=message;
      });
      EventBus.$on('setToken', (message) => {
        this.token=localStorage.getItem('token');
        this.$router.push({ path: '/' });

      });
      // EventBus.$on('set-fullScreen', (message) => {
      //   this.fullScreen=message;
      // });
    },
    methods:{
      // 获取 SvgMap 组件的 DOM
      getSvgMapDom() {
        if (this.$refs.amapSvgRef) {
          // 获取组件实例
          const svgMapComponent = this.$refs.amapSvgRef;
          // 获取组件的根 DOM 元素
          const svgMapDom = svgMapComponent.$el;
          console.log('SvgMap DOM:', svgMapDom);
          return svgMapDom;
        }
        return null;
      },
      
      // 获取 SvgMap 组件实例
      getSvgMapComponent() {
        return this.$refs.amapSvgRef;
      }
    }
  }
</script>

<style>
  Login{
    width: 100%;
    height: 100%;
  }
  .fade-enter-active{
    animation: fadeIn 1s cubic-bezier(.9,.03,.8,1.55) forwards;
  }
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  /* 定义动画 */
  @keyframes slideDown {
    from {
      transform: translateY(-100%); /* 从顶部开始 */
    }
    to {
      transform: translateY(0); /* 移动到原始位置 */
    }
  }
  .screen-container {
    width: 100%;
    display: flex;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: black;
  }
  /*.map-container {*/
  /*  position: absolute;*/
  /*  top: 0;*/
  /*  left: 50%;*/
  /*  transform: translateX(-50%);*/
  /*  width: 50%;*/
  /*  height: 100%;*/
  /*  z-index: 1;*/
  /*}*/
  .map-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  /* 地图样式 */
  .map {
    width: 100%;
    height: 100%;
  }

  /* 渐变遮罩 */
  .map-mask {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100px; /* 渐变区域宽度 */
    pointer-events: none; /* 允许点击穿透 */
    z-index: 3;
  }

  .map-mask-left {
    position: absolute;
    top: 0;
    left: 0px;
    height: 100%;
    background-color: rgba(29, 39, 68, 1);
    width: 50%; /* 渐变区域宽度 */
    pointer-events: none; /* 允许点击穿透 */
    z-index: 3;
  }

  .map-mask-right {
    position: absolute;
    top: 0;
    right: 0px;
    background-color: rgba(29, 39, 68, 1);
    height: 100%;
    width: 50%; /* 渐变区域宽度 */
    pointer-events: none; /* 允许点击穿透 */
    z-index: 3;
  }

  .left-mask {
    left: 25%;
    background: linear-gradient(to right, rgba(0,0,0,1), transparent);
  }

  .right-mask {
    right: 25%;
    background: linear-gradient(to left, rgba(0,0,0,1), transparent);
  }

  .content-layer {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }
</style>
